<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
<div id="Application">
<div>{{type}}</div>
<div>{{typeFunc()}}</div>
    <button @click="add">+</button>
    <div>
        <input v-model="searchText">
    </div>
</div>
<script>
    const App = {
        data() {
            return {
                count: 0,
                searchText:""
            }
        },
        computed: {
            type1(){
                return this.count > 10 ? "大" : "小";
            },
            type: {
                get() {
                    return this.count > 10 ? "大" : "小";
                },
                set(newValue) {
                    if (newValue === "大") {
                        this.count = 11;
                    } else {
                        this.count = 0;
                    }
                }
            }
        },
        watch:{
            searchText(newValue,oldValue){
                if(newValue.length>10){
                    alert("超过10个字符")
                    this.searchText="";
                }
            }
        },
        methods: {
           add(){
               this.count++;
           },
            // 使用函数与使用计算属性的结果完全一致。然而事实上，计算属性是基于其所依赖的存储属性的值的变化而重新计算的，计算完成后，其结果会被缓存，下次访问计算属性时，只要其所依赖的属性没有变化，其内的逻辑代码就不会重复执行。而函数则不同，每次访问其都是重新执行函数内的逻辑代码得到的结果。因此，在实际应用中，我们可以根据是否需要缓存这一标准来选择使用计算属性或函数。
            typeFunc(){
                return this.count>10?"大":"小"
            }
        }
    };
    let instance=Vue.createApp(App).mount("#Application");
    console.log(instance.count)
    instance.add();
    instance.type="大"
    console.log(instance.type)
    console.log(instance.$data.count)
</script>
</body>
</html>
